<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        /*方案1*/
        function splitFragment(size = 200, index = 0) {
            const fragment = document.createDocumentFragment();
            for (let i = 0; i < 200; i++) {
                const div = document.createElement('div');
                div.innerText = index * size + i;
                fragment.appendChild(div)
            }
            document.body.append(fragment)
        }

        for (let i = 0; i <= 500; i++) {
            splitFragment(200, i)
        }

        /*方案2*/
        for (let i = 0; i <= 100000; i++) {
            const div = document.createElement('div');
            div.innerText = i
            document.body.append(div)
        }

        /*方案3*/
        const fragment = document.createElement();
        for (let i = 0; i <= 100000; i++) {
            const div = document.createElement('div');
            div.innerText = i
            fragment.body.append(div)
        }
        document.body.append(fragment)


    </script>

</body>

</html>